<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id='app'>
    <div>
      <p>
        {{name}} - {{message}}
      </p>
      <p>
        {{name}}
      </p>
      <p>
        {{message}}
      </p>
    </div>
  </div>

  <script>
    // 步骤拆解
    // 1. 拿到模板
    // 2. 拿到 data
    // 3.将数据和模板结合，得到的是html元素（dom元素）
    // 4. 放到页面中

    let rkuohao = /\{\{(.+?)\}\}/g

    // 1
    let tmpNode = document.querySelector('#app');

    // 2
    let data = {
      name: 'this is name',
      message: 'this is a message'
    }

    // 3.
    // 一般使用递归
    // 在现在这个案例中template 是 dom元素
    // 在真正的vue源码中是dom -> 字符串 -> VNode -> 真正的DOM
    function compiler (template, data) {
      let childNodes = template.childNodes;

      for(let i = 0;i < childNodes.length; i++) {
        let type = childNodes[i].nodeType;
        if(type === 3) {
          let txt = childNodes[i].nodeValue;

          txt = txt.replace(rkuohao, function(_, g) {
            let key = g.trim(); // 写在双花括号里面的东西
            let value = data[key];
            
            return value
          })

          childNodes[i].nodeValue = txt;
        } else if(type === 1) {
          compiler(childNodes[i], data);
        }
      }
    }

    compiler(tmpNode, data);

    // 上面的思路有很大的问题
    // 1. vue使用的虚拟dom
    // 2. 只考虑了单属性 （{{ name }}）， 而vue中大量的使用层级（ {{ child.name.firstName }} ）
    // 3. 代码没有整合
  </script>
</body>
</html>